<template>
  <div class="detail">
    <v-navbar/>
    <div class="banner">
      <swiper :list="bannerList" class="swiper-height"></swiper>
      <div class="shade" v-if="this.type == 0">
      </div>
    </div>
    <div class="detail_goods">
      <p class="goodsName">{{goodsData.goodsName}}</p>
      <p class="deal deal-bottom">
        <span class="desc deal-center"><i class="convert"></i>{{goodsData.needIntegral}}</span>
        <span class="desc">库存：{{goodsData.stock}}</span>
        <span class="desc">已兑换：{{goodsData.salesVolume}}</span>
      </p>
    </div>
    <div class="detail_bids" v-if="bids.length > 0">
      <div class="bidsTit">
        <Icon class="jilu" type="ios-paper-outline"/>
        <span>兑换记录</span>
      </div>
      <div class="d-table">
        <table :class="{'marquee_top': animate}">
          <tr v-for="(item, i) in bids" :key="item.id" :class="{'change': i == 1}">
            <td><img :src="item.headPortrait == undefined ? userImg:
						item.headPortrait" width="23" alt=""></td>
            <td>{{item.nickName}}</td>
            <td>{{item.goodsPrice}}积分以兑换</td>
            <td>{{item.createTime}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="goodsDetail">
      <div class="bidsTit">
        <img src="../../styles/imgs/deal/detail.png" alt="">
        <span>商品详情</span>
      </div>
      <div class="goodsImg" v-html="detailImg">
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom-wrapper">
        <div class="confirm" @click.stop="_confirm">
          <span class="text">兑换</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import userImg from '@imgs/self/user_img.png'
  import swiper from '@c/swiper/swiper'
  import navbar from '@c/navbar/navbar'
  import share from '@c/share/share'
  import CountDown from '@c/countDown/countDown'
  import { formatDate } from '@js/formatDate.js'
  import { Connect } from '@api/apiUrl'
  import { mapState, mapMutations } from 'vuex'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
  import {
    tokenAtPost,
    jtAtpost,
    gtAtpost,
    tokenAtLink,
    jtAtget,
  } from '@api/axiosAutionToken'

  export default {
    name: 'DealDetail',
    data() {
      return {
        userImg,
        type: null,
        animate: false,
        bidId: '0', //查询出价记录id
        goodsData: {}, //产品数据
        bannerList: [],
        detailImg: '', //产品详情图片
        isCollection: false,
        auctionPrice: '', //商品价
        bidsTime: '', //出价记录循环
        sock: {}, //socket
        stomp: '',
        bids: [],
      }
    },

    components: {
      swiper,
      'v-navbar': navbar,
      share,
      CountDown,
    },

    computed: {
      ...mapState(['wtitle', 'rback', 'signed']),
    },

    methods: {
      ...mapMutations(['WTITLE', 'RBACK', 'USERSINGED']),
      // 添加到购物车
      _confirm() {
        let key = localStorage.getItem('userId')
        if (key === null) {
          this.$Message.warning('请先登录')
          return
        }
        this.$store.state.IntegralId = this.goodsData.id
        this.$router.push('/IntegralOrder')
      },
      // 显示分享
      _share() {
        this.share = true
      },
      // 关闭分享
      _closeShore() {
        this.share = false
      },
      //循环出价记录
      showMarquee() {
        this.animate = true
        setTimeout(() => {
          this.bids.push(this.bids[0])
          this.bids.shift()
          this.animate = false
        }, 500)
      },
      // 获得兑换详情
      _getEndGoods() {
        this.$store.state.loadding = true
        gpost(vlink.convert.detail + this.$route.query.id + '/' + window.localStorage.getItem('userId')).then(re => {
          this.$store.state.loadding = false
          if (re.status === 0) {
            this.goodsData = re.data.list[0]
            this.bannerList = re.data.list[0].imgList
            this.detailImg = re.data.list[0].goodsIntro1
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 获得兑换记录
      _getBids() {
        let info = {
          id: this.$route.query.id
        }
        vpost(vlink.convert.record, info).then(re => {
          if (re.status === 0) {
            this.bids = re.data
            this._isBidsLength()
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 判断兑换记录是否大于3条
      _isBidsLength() {
        if (this.bids.length > 3) {
          this.bidsTime = setInterval(this.showMarquee, 2000)
        }
      },
      // 判断商品状态
      _isGoodsState() {
        this.WTITLE('兑换详情')
        this.RBACK(true)
        this._getEndGoods()
        this._getBids()
      },
    },
    mounted() {
      this.$nextTick(() => {
        this._isGoodsState()
      })
    },
    beforeDestroy() {
      if(this.bidsTime) {
        clearInterval(this.bidsTime)
      }
    }
  }
</script>
